<template>
    <a-descriptions title="函数库信息" bordered>
      <a-descriptions-item :span="1" label="最新版本">
        {{latestInfo.version}}
      </a-descriptions-item>
      <a-descriptions-item :span="1" label="更新时间">
        {{latestInfo.Date}}
      </a-descriptions-item>
      <a-descriptions-item :span="1" label="更新者" style="max-width: 200px">
        {{latestInfo.Author}}
      </a-descriptions-item>
      <a-descriptions-item label="GIT 更新记录" :span="3">
        <div  class="url">
          地址:<a href="https://gitee.com/xiaoliu666666/v-js-libs">https://gitee.com/xiaoliu666666/v-js-libs</a>
        </div>
        <div style="height: 200px;overflow-y: scroll">
          <a-collapse v-for="(item,index) in gitLog">
            <a-collapse-panel :key="index" :header="item.commit">
              <p><span class="info-key">函数库版本:</span>{{ item.version }}</p>
              <p><span class="info-key">更新说明:</span>{{ item.commit }}</p>
              <p><span class="info-key">Git Log:</span>{{ item.log }}</p>
              <p><span class="info-key">作者:</span>{{ item.Author }}</p>
              <p><span class="info-key">更新时间:</span>{{ item.Date }}</p>
            </a-collapse-panel>
          </a-collapse>
        </div>
      </a-descriptions-item>
      <a-descriptions-item label="NPM 更新记录" :span="3">
        <div  class="url">
          地址:<a href="https://www.npmjs.com/package/xiaoliutest">https://www.npmjs.com/package/xiaoliutest</a>
        </div>
        <div style="height: 200px;overflow-y: scroll">
          <a-collapse v-for="(item,index) in npmVersion">
            <a-collapse-panel :key="index" :header="item.version">
              <p><span class="info-key">版本号:</span>v{{ item.version }}</p>
              <p><span class="info-key">版本描述:</span>{{ item.description }}</p>
              <p><span class="info-key">更新时间:</span>{{ item.date }}</p>
              <p><span class="info-key">压缩包地址:</span><a :href="item.file">{{item.file}}</a></p>
              <p><span class="info-key">文件数量:</span>{{ item.fileCount }}</p>
            </a-collapse-panel>
          </a-collapse>
        </div>
      </a-descriptions-item>
    </a-descriptions>
</template>

<script setup>
import {computed, onMounted, reactive, ref, unref, useContext} from "vue";
import {getNpmInfo,getGitInfo} from "../../../api/api";
import {message} from "ant-design-vue";
import {getNextVersion} from "../../../utils/version";
import {storage} from "../../../utils/storage";
const {emit } = useContext()

onMounted(()=>{
  getGitLog()
  getNpmVersion()
})

let latestInfo = ref({})
let gitLog = ref([''])
let npmVersion = ref([''])
const getGitLog = async ()=>{
  const res = await getGitInfo()
  if(res.code === 0){
    message.error('git log 获取失败' + res.msg)
    return
  }
  const logs = res.msg.split('commit').filter(log=>log)
  const infos = logs.map(item=>{
    const infoList = item.split('\n').filter(list=>list)
    const log = infoList[0].trim()
    const Author =infoList[1].split(':')[1].trim()
    const Date =infoList[2].split(':')[1].trim()
    const fullCommit = infoList[3].trim().split('--version')
    const commit = fullCommit[0]
    const version = fullCommit[1] || '0.0.0'
    return{log,Author,Date,commit,version}
  })
  console.log(infos)
  gitLog.value = infos
  const latest = infos.filter(item=>item.version!=='0.0.0')[0] || {}

  latestInfo.value = {
    version:latest.version || '0.0.0',
    Author:latest.Author || 'unknown',
    Date:latest.Date || 'unknown'
  }
  storage.session.set('version',unref(latestInfo).version)
}
const getNpmVersion = async ()=>{
  const res = await getNpmInfo({
    name:'xiaoliutest'
  })
  const versions = []
  if(res.versions){
    const v = res.versions
    for (let i in v){
      versions.push({
        version:i,
        description:v[i].description,
        fileCount:v[i].dist.fileCount,
        file:v[i].dist.tarball,
        date:res.time[i]
      })

      emit('latestNpmVersion',versions[versions.length-1])
      npmVersion.value = versions
    }
  }


}
</script>

<style scoped>
.version-wrap{
  width: 80%;
  min-width: 1000px;
  margin: 0 auto;
}
.info-key{
  font-weight: 800;
  margin: 0 10px;
  width: 90px;
  text-align: right;
  display: inline-block;
}
.url{
  position: absolute;
  display: flex;
  flex-direction: column;
  left: -21%;
  bottom: 5%;
  width: 150px;
  text-align: left;
}
::v-deep .ant-collapse-header{
  text-align: left;
}
::v-deep .ant-collapse-content{
  text-align: left;
}
::v-deep .ant-descriptions-item-content{
  position: relative;
}

</style>
